import React, { useEffect, useState } from 'react'
import { Down } from '@react-vant/icons';
import { Location, Edit } from '@react-vant/icons';
import { EditSFill } from 'antd-mobile-icons'
import './Address.css'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Address() {
  const navigate = useNavigate();
  const [address_ls, setAddress_ls] = useState([])
  const getData = () => {
    axios.get('http://127.0.0.1:3000/getAddress').then(res => {
      if (res.code === 200) {
        setAddress_ls(res.data)
      }
    })
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <div className='my_address_header'>
        <Down fontSize={30} style={{ transform: 'rotate(90deg)' }} onClick={() => { navigate('/all/my') }}></Down>
        <h2>地址</h2>
      </div>
      <div className='my_address_content'>
        {
          address_ls.map(item => {
            return (
              <div key={item._id}>
                <div className='my_address_content_item'>
                  <div className='my_address_content_item_left'>
                    <div className='left'>
                      <Location fontSize={20} />
                    </div>
                    <div className='right'>
                      <h3>{item.aname}</h3>
                      <p>{item.address}</p>
                    </div>
                  </div>
                  <div className='my_address_content_item_right'>
                    <EditSFill style={{ color: 'rgb(254, 192, 42)' }} fontSize={25} />
                  </div>
                </div>
                <hr />
              </div>
            )
          })
        }
      </div>
      <div className='my_go_add_address'>
        <button className='go_add_address_btn' onClick={() => { navigate('/addAddress') }}>添加新地址</button>
      </div>
    </div>
  )
}
